<template>
  <div>
    <el-form class="f" :model="form" ref="form" label-width="80px" label-position="right">
      <v-form-title title="基本注册信息"/>
      <!--<el-form-item label="用户名">{{userInfo.username}}</el-form-item>    <i class="iconfont icon-xiangqing" @click="saveUsername()" v-if="!is_readonly"></i>-->
      <el-form-item label="用户名">
        <input class="line-input line-input-username" placeholder="请输入用户名" v-model="userInfo.username" :readonly="is_readonly" :class="{'clickActive':is_readonly}"/><i class="iconfont icon-bianji" @click="editUsername()" v-if="is_readonly"></i><el-button type="primary" class="edit-user-btn" @click="saveUsername()" v-if="!is_readonly">完成</el-button>
      </el-form-item>
      <el-form-item label="手机号码">{{userInfo.phone}}</el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator'
  import vFormTitle from '@/components/form-title'
  import { Mutation } from 'vuex-class'

  @Component({
    components: {
      vFormTitle
    }
  })
  export default class Base extends Vue {
    @Prop() userInfo
    @Mutation removeUserInfo
    @Mutation setUserInfo
    form = {

    }

    is_readonly = true
    editUsername () {
      this.is_readonly = false
    }
    saveUsername () {
      this.is_readonly = true
      this.submitForm()
    }
    async exit () {
        let res: AjaxResponse = await this.$axios.post('b/boms/user/logout')
        this.removeUserInfo()
        this.$utils.tips(res)
        this.$router.push('/login')
    }
    async submitForm () {
      let f = {
        userName: this.userInfo.username
      }
      let res: AjaxResponse = await this.$axios.post('g/gateway/member/changeuname', f)
      this.$utils.tips(res)
      if (res.responseCode === 200) {
        // this.removeUserInfo()
        // console.log(this.userInfo.username)
        this.exit()
      }
    }
  }
</script>

<style lang="less" scoped>
  .f {
    width: 1180px;
    margin: 0 auto;
    padding-top: 60px;
  }
  .icon-bianji,.icon-xiangqing{
    color: #4E93FF !important;
    cursor: pointer;
  }

  .line-input-username{
    border-top: none;
    border-left: none;
    border-right: none;
    outline: none;
    border-bottom: 1px solid #e6e6e6;
    display: inline-block;
    width: 180px;
    height: 25px;
  }
  .edit-user-btn {
  	margin-left: 10px;
		height: 28px;
		line-height: 4px;
  }
  .clickActive{
    border-bottom: none;
  }

</style>
